<template>
  <div class="wrap">
    <div class="filter-wrap">
      <div class="filter-line">
        <div class="filter-item">
          <div class="label">姓名</div>
          <input type="text" v-model="filter.name" />
        </div>
        <div class="filter-item">
          <div class="label">性别</div>
          <select v-model="filter.sex">
            <option
              v-for="item in $options.sexOptions"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </option>
          </select>
        </div>
        <div class="filter-item">
          <div class="label">权限</div>
          <select v-model="filter.lv">
            <option
              v-for="item in $options.lvOptions"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </option>
          </select>
        </div>
      </div>
      <div>
        <button @click="handleSearch">搜索</button>
        <button @click="reset">重置</button>
      </div>
    </div>
    <div class="table-wrap">
      <div class="table-top">
        <div class="table-name flex-center">姓名</div>
        <div class="table-sex flex-center">性别</div>
        <div class="table-lv flex-center">权限级别</div>
        <div class="table-edit flex-center">操作</div>
      </div>
      <div class="table-item" v-for="item in tableDataSource" :key="item.id">
        <div class="table-name flex-center">{{ item.name }}</div>
        <div class="table-sex flex-center">{{ item.sex }}</div>
        <div class="table-lv flex-center">{{ item.lv }}</div>
        <div class="table-edit flex-center">
          <a class="item-btn" href="#" @click="handleDeleteItem(item)">删除</a>
          <a class="item-btn" href="#">编辑</a>
        </div>
      </div>
    </div>
    <modal 
        :is-show="showDeleteModal" 
        :handle-enter="deleteItem"
        :handle-cancel="handleCancel"
    >
      {{ deleteContent }}
    </modal>
  </div>
</template>

<script>
import { post } from "./../../utils/request";
import Modal from "./../../components/Model";
import { SEX_MAP, SEX_OPTIONS, LV_OPTIONS, DEFAULT_FILTER } from "./config";

export default {
  name: "filter-list",
  // 与视图相关的动态数据放在data里
  data: () => ({
    userList: [],
    filter: {
      ...DEFAULT_FILTER,
    },
    // 控制删除弹窗
    showDeleteModal: false,
    // 被选择的要删除的这一项
    currentSelectDelete: null,
  }),
  // 尽可能减少不必要的data，以减少VM绑定器带来的损耗。
  sexOptions: SEX_OPTIONS,
  lvOptions: LV_OPTIONS,
  // 请求数据
  mounted: function () {
    this.getTableDataSource();
  },
  methods: {
    // 点击搜索后的回调
    handleSearch: function () {
      this.getTableDataSource(this.filter);
    },
    // 获取table数据
    getTableDataSource: function (params) {
      post("/getAdaList", params).then((data) => {
        if (!Array.isArray(data)) {
          return;
        }
        this.userList = data;
      });
    },
    reset: function () {
      this.filter = {
        ...DEFAULT_FILTER,
      };
    },
    handleDeleteItem: function (item) {
      this.showDeleteModal = true;
      this.currentSelectDelete = item.name;
    },
    handleCancel: function(){
        this.showDeleteModal = false;
    },
    deleteItem: function (id) {
      post("/deleteAdaById", {
        id,
      }).then((data) => {
        if (data) {
          this.showDeleteModal = false;
          this.getTableDataSource();
        }
      });
    },
  },
  computed: {
      tableDataSource: function(){
          return this.userList.map((item) => ({
            ...item,
            sex: SEX_MAP[item.sex],
            }))
      },
      deleteContent: function(){
          return `确认删除${this.currentSelectDelete}吗？`
      }
  },
  components: {
    modal: Modal,
  },
};
</script>

<style scoped>
.filter-wrap {
  padding: 10px;
}
.item-btn {
  color: deepskyblue;
  margin-right: 10px;
}
.filter-line {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.label {
  display: flex;
  padding-right: 5px;
  justify-content: flex-end;
}
.table-item {
  display: flex;
  align-items: center;
}
.table-top {
  display: flex;
  background: #ddd;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-name {
  flex: 4;
}
.table-sex {
  flex: 3;
}
.table-lv {
  flex: 3;
}
.table-edit {
  flex: 5;
}
</style>
